@charset "utf-8";

// 变量声明
// 皮肤默认色系
$skin-color-main-default: #1cd388;
$skin-color-volume-fill-default: #b9b9b9;
// 皮肤优雅色系
$skin-color-main-elegant: #1289f7;
$skin-color-volume-fill-elegant: #404040;
// 皮肤科技色系
$skin-color-main-technology: #30d1f9;
$skin-color-volume-fill-technology: #242424;
// 皮肤简洁色系
$skin-color-main-concise: #10ca56;
$skin-color-volume-fill-concise: #4b4b4b;
// 控制条初始bottom位置
$h5player-live-bar-bottom: -40px; // -40px;
// 皮肤科技色系特定样式
$h5player-live-bar-bottom-technology: -50px;
$h5player-live-bar-bottom-technology-controls-in: 0;
$h5player-live-bar-bottom-technology-progress-hover: 0;

$wordColor-white: #fff;
$wordColor-yellow: #fff100;
$wordColor-orange: #eb6100;;
$wordColor-red: #e60012;
$wordColor-pink: #ea68a2;
$wordColor-purple: #920783;
$wordColor-blue: #00a0e9;
$wordColor-green:  #22ac38;

// 混合器; 
@mixin translucent{
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    filter: alpha(opacity=50);
    opacity: .5;
}
@mixin transformRotate($deg){
    transform:rotate($deg);
    -ms-transform:rotate($deg); 	/* IE 9 */
    -moz-transform:rotate($deg); 	/* Firefox */
    -webkit-transform:rotate($deg); /* Safari 和 Chrome */
    -o-transform:rotate($deg); 	/* Opera */
}


// 样式部分
.videoContainer{
    width: 100%;
    height: 100%;
    position: relative;
}
.close{
    display: inline-block;
    width: 16px;
    height: 16px;
    pointer-events: auto;
    //background-image: url(close.png);
    background-image: url("");
    cursor: pointer;
}
.liveContent{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    iframe,object,embed,img,video,canvas{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
    }
    video{
        background-image: url("");
        background-position: center;
        background-size: 64px auto;
        background-repeat: no-repeat;
    }
    canvas{
        width: 100% !important;
        height: 100% !important;
        z-index: 9;
    }
}
.h5player-live-ctrl{
    /* 自定义H5直播播放控制器 */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    z-index: 99;

    .h5player-skin-technology &{
        height: 50px;
    }

    .h5player-progress-bar-container{
        /* 视频进度控制条显示 */
        position: absolute;
        left: 0;
        top: -10px;
        right: 0;
        height: 10px;
        padding: 0;
        vertical-align: top;
        cursor: pointer;

        .h5player-skin-technology &{
            position: static;
        }

        .h5player-progress-list{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 4px;
            background-color: rgba(166,166,166,.5);
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            transition: all 300ms ease-in;

            .h5player-skin-elegant &{
                background-color: #292929;
                border-bottom: 1px solid #3b3b3b;
            }
            .h5player-skin-technology &{
                background-color: #2d2d2d;
            }
            .h5player-skin-concise &{
                background-color: #323232;
            }
            .h5player-status-progress-hover & {
                height: 10px;
            }
            .h5player-progress-load,.h5player-progress-play{
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 2px;
                background-color: $skin-color-main-default;
                -webkit-transform: translateZ(0);
                transform: translateZ(0);

                .h5player-skin-elegant &{
                    background-color: $skin-color-main-elegant;
                }
                .h5player-skin-technology &{
                    background-color: $skin-color-main-technology;
                }
                .h5player-skin-concise &{
                    background-color: $skin-color-main-concise;
                }
            }
            .h5player-progress-load{
                opacity: 0.3;
            }
        }
        .h5player-progress-btn-scrubber{
            position: absolute;
            display: none;
            width: 10px;
            height: 10px;
            top: 3px;
            margin-left: -5px;
            cursor: pointer;
            user-select: all;
            -ms-touch-action: none;
            touch-action: none;

            .h5player-status-progress-hover &{
                display: block;
                top: 0px;
            }
            .h5player-status-progress-hover .h5player-skin-technology &{
                top: auto;
                bottom: 0;
            }

            .h5player-progress-btn-scrubber-indicator{
                width: 10px;
                height: 10px;
                border-radius: 100%;
                background-color: #fff;
                box-shadow: 0 0 15px $skin-color-main-default;
                user-select: all;
                -ms-touch-action: none;
                touch-action: none;
            }
        }
    }
    .h5player-live-bar{
        position: absolute;
        left: 0;
        right: 0;
        bottom: $h5player-live-bar-bottom;
        height: 100%;
        background-color: rgba(43,43,43,.8);
        -webkit-transition: bottom 300ms ease-in;
        transition: bottom 300ms ease-in;

        .h5player-skin-technology &{
            bottom: $h5player-live-bar-bottom-technology;

            .h5player-status-controls-in &{
                bottom: $h5player-live-bar-bottom-technology-controls-in;
            }
            .h5player-status-progress-hover &{
                bottom: $h5player-live-bar-bottom-technology-progress-hover;
            }
        }

        .h5player-skin-elegant &{
            background: linear-gradient(top , #262626 , #141414 100%);
            background: -o-linear-gradient(top , #262626 , #141414 100%);
            background: -ms-linear-gradient(top , #262626 , #141414 100%);
            background: -moz-linear-gradient(top , #262626 , #141414 100%);
            background: -webkit-linear-gradient(top , #262626 , #141414 100%);
        }

        .h5player-skin-technology &{
            background: linear-gradient(top , rgba(62,70,77,0) , rgba(62,70,77,1) 100%);
            background: -o-linear-gradient(top , rgba(62,70,77,0) , rgba(62,70,77,1) 100%);
            background: -ms-linear-gradient(top , rgba(62,70,77,0) , rgba(62,70,77,1) 100%);
            background: -moz-linear-gradient(top , rgba(62,70,77,0) , rgba(62,70,77,1) 100%);
            background: -webkit-linear-gradient(top , rgba(62,70,77,0) , rgba(62,70,77,1) 100%);
        }
        .h5player-skin-concise &{
            background-color: #202020;
        }
    }
    .h5player-status-fullScreen &{
        z-index: 2147483647;
    }
    .h5player-status-controls-in & .h5player-live-bar{
        bottom: 0;
    }
}
.h5player-ctrl-bar {
    .h5player-ctrl-bar-btn{
        float: left;
        margin: 5px 10px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-image: url("");
        color: $skin-color-main-default;
        cursor: pointer;

        &.btn-barrage{
            /* 弹幕开关 */
            float: right;
            width: 53px;
            background-position: -60px -90px;
            &.disabled{
                cursor: default;
            }
            &.active{
                background-position: 0 -90px;
            }
            .h5player-status-adPlayer-playing &{
                @include translucent;
                cursor: default;
            }
        }

        .h5player-skin-elegant &{
            margin: 11px 16px;
            width: 18px;
            height: 18px;
            line-height: 18px;
            //background-image: url(skin/skinElegant.png);
            background-image: url("");
        }

        .h5player-skin-technology &{
            margin: 11px 16px;
            width: 18px;
            height: 18px;
            line-height: 18px;
            //background-image: url(skin/skinTechnology.png);
            background-image: url("");
        }

        .h5player-skin-concise &{
            margin: 11px 16px;
            width: 18px;
            height: 18px;
            line-height: 18px;
            //background-image: url(skin/skinConcise.png);
            background-image: url("");
        }

        &.btn-play{
            background-position: 0 0;

            &:hover{
                background-position:-30px 0;

                .h5player-status-adPlayer-playing &{
                    background-position: 0 0;
                }
            }

            .h5player-skin-elegant &{
                background-position: -92px -81px;

                &:hover{
                    background-position: -69px -81px;

                    .h5player-status-adPlayer-playing & {
                        background-position: -92px -81px;
                    }
                }
            }

            .h5player-skin-technology &{
                background-position: -95px 0px;
                width: 40px;
                height: 40px;
                margin: 0 10px;

                &:hover{
                    background-position: -95px -45px;
                }
            }

            .h5player-skin-concise &{
                background-position: -69px -104px;
                &:hover{
                    background-position: -46px -104px;
                }
            }

            .h5player-status-playing &{
                background-position:-60px 0;
                &:hover{
                    background-position:-90px 0;;
                }
            }

            .h5player-status-playing.h5player-skin-elegant &{
                background-position: -23px -104px;
                &:hover{
                    background-position: 0px -104px;
                }
            }

            .h5player-status-playing.h5player-skin-technology &{
                background-position: -50px 0px;
                &:hover{
                    background-position: -50px -45px;
                }
            }

            .h5player-status-playing.h5player-skin-concise &{
                background-position: -128px -92px;
                &:hover{
                    background-position: -128px -69px;
                }
            }

            .h5player-status-adPlayer-playing &{
                @include translucent;
                cursor: default;
            }
        }
        &.btn-refresh{
            background-position: -120px -1px;
            &:hover{
                background-position: -145px -1px;
            }
        }
        &.btn-fullScreen{
            float: right;
            background-position: -148px -30px;
            &:hover{
                background-position: -148px -60px;
            }
            .h5player-status-fullScreen &{
                background-position: -119px -89px;
                &:hover{
                    background-position: -148px -89px;
                }
            }

            .h5player-skin-elegant & {
                background-position: -46px -81px;
                &:hover{
                    background-position: 0px -81px;
                }

                .h5player-status-fullScreen &{
                    background-position: -122px -23px;
                    &:hover{
                        background-position: -122px 0px;
                    }
                }
            }

            .h5player-skin-technology & {
                background-position: -124px -96px;
                &:hover{
                    background-position: -69px -143px;
                }

                .h5player-status-fullScreen &{
                    background-position: -173px 0px;
                    &:hover{
                        background-position: -138px -143px;
                    }
                }
            }

            .h5player-skin-concise & {
                background-position: -23px -104px;
                &:hover{
                    background-position: 0px -104px;
                }

                .h5player-status-fullScreen &{
                    background-position: -128px 0px;
                    &:hover{
                        background-position: -92px -104px;
                    }
                }
            }
            
        }
        &.btn-barrage-setting{
            float: left;
            background-position: -175px -1px;
            &:hover{
                background-position: -175px -31px;
            }

            .h5player-skin-elegant &{
                background-position: -23px -81px;
                &:hover{
                    background-position: -99px -46px;
                }
            }

            .h5player-skin-technology &{
                background-position: -173px -46px;
                &:hover{
                    background-position: -147px -96px;
                }
            }

            .h5player-skin-concise &{
                background-position: -98px -75px;
                &:hover{
                    background-position: -75px -75px;
                }
            }
        }      
        &.btn-kbps,&.btn-lines,&.btn-vr{
            float: right;
            background-image: none;
            width: 40px;
            height: 40px;
            padding: 10px 0;
            border-radius: 3px;
            margin: 0 10px;
            color: #fff;
            font-size: 12px;
            box-sizing: border-box;

            .h5player-status-adPlayer-playing &{
                @include translucent;
                cursor: default;
            }

            > span{
                display: inline-block;
                width: 100%;
                height: 20px;
                line-height: 20px;
                vertical-align: top;
                background-color: rgba(0,0,0,.2);
                &:hover{
                    color: $skin-color-main-default;
                    .h5player-skin-elegant &{
                        color: $skin-color-main-elegant;
                    }

                    .h5player-skin-technology &{
                        color: $skin-color-main-technology;
                    }

                    .h5player-skin-concise &{
                        color: $skin-color-main-concise;
                    }
                }
                .h5player-status-adPlayer-playing &{
                    color: #fff;
                }
            }
        }
        &.btn-kbps{
            position: relative;
            &:hover .h5player-ctrl-bar-kbps-panel{
                display: block;
            }
            &.h5player-ctrl-bar-kbps-panel-hide .h5player-ctrl-bar-kbps-panel{
                display: none;
            }
        }
        &.btn-vr{
            position: relative;
            &:hover .h5player-ctrl-bar-vr-panel{
                display: block;
            }
            &.h5player-ctrl-bar-vr-panel-hide .h5player-ctrl-bar-vr-panel{
                display: none;
            }
        }
        &.btn-volume{
            margin-right: 0;
            background-position: 0 -30px;
            &:hover{
                background-position: -30px -30px;
            }
            .h5player-status-muted & {
                background-position: -60px -30px;
                &:hover{
                    background-position: -90px -30px;
                }
            }

            .h5player-skin-elegant & {
                margin-right: 0;
                background-position: -99px -23px;

                &:hover{
                    background-position: -99px 0px;
                }
            }

            .h5player-skin-technology & {
                margin-right: 16px;
                background-position: -46px -143px;

                &:hover{
                    background-position: 0px -143px;
                }
            }

            .h5player-skin-concise & {
                margin-right: 16px;
                background-position: -52px -75px;

                &:hover{
                    background-position: -29px -75px;
                }
            }

            .h5player-status-muted.h5player-skin-elegant &{
                background-position: -122px -69px;
                &:hover{
                    background-position: -122px -46px;
                }
            }

            .h5player-status-muted.h5player-skin-technology &{
                background-position: -115px -143px;
                &:hover{
                    background-position: -173px -23px;
                }
            }

            .h5player-status-muted.h5player-skin-concise &{
                background-position: -128px -46px;
                &:hover{
                    background-position: -128px -23px;
                }
            }
        }
        /* 视频清晰度切换盘 */
        .h5player-ctrl-bar-kbps-panel,
        .h5player-ctrl-bar-vr-panel{
            display: none;
            width: 50px;
            position: absolute;
            color: #ddd;
            right: -5px;
            bottom: 35px;
            text-align: center;
            background-color: rgba(0,0,0,.8);
            border-radius: 3px;
            z-index: 10;
            font-size: 12px;
            .h5player-ctrl-bar-kbps-change,
            .h5player-ctrl-bar-vr-change{
                display: block;
                line-height: 25px;
                padding: 0 5px;
                cursor: pointer;
                &:hover{
                    background-color: rgba(255,255,255,.2);
                }
                &.h5player-ctrl-bar-kbps-current,
                &.h5player-ctrl-bar-vr-current{
                    color: $skin-color-main-default;

                    .h5player-skin-elegant &{
                        color: $skin-color-main-elegant;
                    }

                    .h5player-skin-technology &{
                        color: $skin-color-main-technology;
                    }

                    .h5player-skin-concise &{
                        color: $skin-color-main-concise;
                    }
                }
            }
        }

        .h5player-skin-elegant &.btn-barrage{
            background-image: none;
            background-color: #5d5d5d;
            color: #c1c1c1;
            border-radius: 5px;
            position: relative;

            &:hover{
                background-color: #767676;
            }
            &:after{
                content: '\5F39';
                position: absolute;
                left: 3.5px;
                top: 0;
                font-size: 12px;
            }
            &.active{
                background-color: $skin-color-main-elegant;
                color: #fff;
            }
        }

        .h5player-skin-technology &.btn-barrage{
            background-position: -92px -143px;
            &:hover{
                background-position: -173px -69px;
            }
            &.active{
                background-position: -23px -143px;
                &:hover{
                    background-position: -173px -90px;
                }
            }
        }

        .h5player-skin-concise &.btn-barrage{
            background-image: none;
            width: 36px;
            position:relative;
            &:before{
                content: '\5F39';
                position: absolute;
                left: 0;
                top: 0;
                width: 36px;
                height: 18px;
                color: transparent;
                border: 2px solid #4f4f4f;
                border-radius: 10px;
                box-sizing: border-box;
            }
            &:after{
                content: '\5F39';
                position: absolute;
                left: 0;
                top: 0;
                width: 18px;
                height: 18px;
                background-color: #868686;
                border-radius: 100%;
                color: #3c3c3c;
                font-size: 12px;
            }
            &.active{
                &:after{
                    color: #fff;
                    left: auto;
                    right: 0;
                    background-color: $skin-color-main-concise;
                }
            }
        }
    }
    .h5player-ctrl-bar-volume-container{
        /* h5播放器音量控制样式 */
        float: right;
        position: relative;

        .h5player-skin-technology &:hover .h5player-ctrl-bar-volume-slide,
        .h5player-skin-concise &:hover .h5player-ctrl-bar-volume-slide{
            display: block;
        }
        
        .h5player-ctrl-bar-volume-slide{
            /* h5player volume sliderbar */
            width: 100px;
            height: 30px;
            background-image: none; 
            margin-left: 0;

            .h5player-skin-elegant & {
                width: 80px;
                height: 30px;
                margin: 5px 15px 5px 8px;
                background-image: none; 
            }

            .h5player-skin-technology & {
                position: absolute;
                display: none;
                left: -22px;
                bottom: 70px;
                width: 92px;
                height: 20px;
                margin: 0;
                background-image: none;
                text-align: center;
                /*background-color: rgba(0, 0, 0, 0.8);*/
                border-radius: 3px;
                z-index: 10;
                font-size: 12px;
                @include transformRotate(-90deg);
            }

            .h5player-skin-concise &{
                position: absolute;
                display: none;
                left: -22px;
                bottom: 70px;
                width: 92px;
                height: 26px;
                margin: 0;
                background-image: none;
                text-align: center;
                background-color: #202020;
                border-radius: 3px;
                z-index: 10;
                font-size: 12px;
                @include transformRotate(-90deg);
            }

            input[type=range] {
                position: relative;
                -webkit-appearance: none;
                width: 100%;
                height: 30px;
                padding: 0;
                margin: 0;
                outline: none;
                background-color: transparent;
                cursor: pointer;
                
                .h5player-status-muted &{
                    @include translucent;
                }

                .h5player-skin-technology &{
                    height: 20px;
                }

                .h5player-skin-concise &{
                    height: 26px;
                }

                &::-webkit-slider-runnable-track{
                    height: 4px;
                    background-color: transparent;
                    z-index: 1;     /* 覆盖在 after伪类之上 */
                }
                &::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    background-color: #fff;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    margin-top: -4px;
                }
                
                &::-moz-range-track {
                    border: none;
                    height: 4px;
                    background-color: #b9b9b9;
                }
                
                &::-moz-range-thumb {
                    background-color: #fff;
                    height: 10px;
                    width: 10px;
                    border: 1px solid transparent;
                    border-radius: 50%;
                }
                &::-moz-range-progress {
                    height: 4px;
                    background-color: $skin-color-main-default;

                    .h5player-skin-elegant &{
                        background-color: $skin-color-main-elegant;
                    }

                    .h5player-skin-technology &{
                        background-color: $skin-color-main-technology;
                    }

                    .h5player-skin-concise &{
                        background-color: $skin-color-main-concise;
                    }
                }
                
                &::-ms-track {
                    height: 4px;
                    background-color: #b9b9b9;
                    border: none;
                    color: transparent;
                    margin: 0;
                }
                &::-ms-thumb {
                    background-color: #fff;
                    height: 10px;
                    width: 10px;
                    /* border: 1px solid #fff; */
                    border-radius: 50%;
                }
                &::-ms-fill-lower{
                    background-color: $skin-color-main-default;

                    .h5player-skin-elegant &{
                        background-color: $skin-color-main-elegant;
                    }

                    .h5player-skin-technology &{
                        background-color: $skin-color-main-technology;
                    }

                    .h5player-skin-concise &{
                        background-color: $skin-color-main-concise;
                    }
                }
                &::-ms-fill-upper{
                    background-color: #b9b9b9;
                }
            }
        }
    }
    /* h5播放器控制条时间线 */
    .h5player-ctrl-timeline-container{
        float: left;
        color: #fff;
        line-height: 30px;
        margin: 5px 10px;
        text-align: center;
        font-size: 12px;
        -ms-user-select: none;
        user-select: none;
        > span{
            margin: 0 5px;
        }
    }
    /* h5播放器弹幕模块 */
    .h5player-ctrl-bar-barrage-container{
        float: right;
        position: relative;
        .h5player-ctrl-bar-barrage-control{
            float: left;
            display: none;
            &.active{
                display: block;
            }
            .barrage-word-setting{
                position: absolute;
                left: 50px;
                bottom: 34px;
                width: 224px;
                height:64px;
                box-sizing: border-box;
                border: rgba(100,100,100,0.8) 1px solid;
                border-radius: 5px;
                background-color: rgba(35,35,35,0.8);
                z-index: 10;
                display: none;
                &.active{
                    display: block;
                }
                ul{
                    display: inline-block;
                    height: 100%;
                    vertical-align: middle;
                    list-style: none;
                    margin-top: 0;
                    margin-bottom: 0;
                    padding: 20px 15px 20px 15px;
                    box-sizing: border-box;
                    &.word-font li{
                        display: inline-block;
                        color: #fff;
                        margin: 0 4px;
                        cursor: pointer;

                        &.active{
                            color: $skin-color-main-default;
                            cursor: default;
                            .h5player-skin-elegant &{
                                color: $skin-color-main-elegant;
                            }
                            .h5player-skin-technology &{
                                color: $skin-color-main-technology;
                            }
                            .h5player-skin-concise &{
                                color: $skin-color-main-concise;
                            }
                        }
                        &.large{
                            font-size: 18px;
                        }
                        &.medium{
                            font-size: 15px;
                        }
                        &.small{
                            font-size: 12px;
                        }
                    }
                    &.word-color{
                        max-width: 125px;
                        padding: 9px 0 0 0;
                        li{
                            display: inline-block;
                            width: 23px;
                            height: 17px;
                            box-sizing: border-box;
                            border-radius: 5px;
                            border: 1px solid transparent;
                            margin: 2px 4px;
                            cursor: pointer;

                            &.active{
                                border-color: $skin-color-main-default;
                                cursor: default;

                                .h5player-skin-elegant &{
                                    border-color: $skin-color-main-elegant;
                                }
                                .h5player-skin-technology &{
                                    border-color: $skin-color-main-technology;
                                }
                                .h5player-skin-concise &{
                                    border-color: $skin-color-main-concise;
                                }
                            }
                            &.white{
                                background-color: $wordColor-white;
                            }
                            &.yellow{
                                background-color: $wordColor-yellow;
                            }
                            &.orange{
                                background-color: $wordColor-orange;
                            }
                            &.red{
                                background-color: $wordColor-red;
                            }
                            &.pink{
                                background-color: $wordColor-pink;
                            }
                            &.purple{
                                background-color: $wordColor-purple;
                            }
                            &.blue{
                                background-color: $wordColor-blue;
                            }
                            &.green{
                                background-color: $wordColor-green;
                            }
                        }
                    }
                }
            }
        }
        .barrage-input-container{
            float: left;
            padding: 8px 8px 0 0;
            color: #999;
            box-sizing: border-box;
        
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;

            input {
                border: 1px solid transparent;
                vertical-align: middle;
                box-sizing: border-box;
                height:22px;
                font-size: 12px;
                outline: none;

                &[type="text"]{
                    padding-left: 10px;
                    width: 342px;
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                }
                &[type="button"]{
                    cursor: pointer;
                    width: 54px;
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                    &:hover{
                        background-color:$skin-color-main-default;
                        color: #fff;

                        .h5player-skin-elegant &{
                            background-color:$skin-color-main-elegant;
                        }

                        .h5player-skin-technology &{
                            background-color:$skin-color-main-technology;
                        }

                        .h5player-skin-concise &{
                            background-color: $skin-color-main-concise;
                        }
                    }
                }
            }
        }
    }
}
/* 音量控制滑动条样式 */
.h5player-ctrl-bar-volume-slidebar{
    &:after{
        content: ' ';
        position: absolute;
        top: 13px;
        left: 0;
        width: 100%;
        height: 4px;
        border-radius: 4px;
        background: linear-gradient(to right, $skin-color-main-default 98%, $skin-color-volume-fill-default 100%,$skin-color-volume-fill-default);
    
        .h5player-skin-elegant &{
            background: linear-gradient(to right, $skin-color-main-elegant 98%, $skin-color-volume-fill-elegant 100%,$skin-color-volume-fill-elegant);
        }

        .h5player-skin-technology &{
            top: 0;
            height: 20px;
            border-radius: 2px;
            background: linear-gradient(to right, $skin-color-main-technology 98%, $skin-color-volume-fill-technology 100%,$skin-color-volume-fill-technology);
        }
        .h5player-skin-concise &{
            top: 9px;
            height: 8px;
            background: linear-gradient(to right, $skin-color-main-concise 98%, $skin-color-volume-fill-concise 100%,$skin-color-volume-fill-concise);
        }
    }   
}
/* 主要用于webkit内核浏览器type range不同百分比的样式设置 */
@for $i from 0 through 100 {
    .h5player-ctrl-bar-volume-slidebar[data-process="#{$i}"]:after{
        background: linear-gradient(to right, $skin-color-main-default #{($i - 1)+'%'}, $skin-color-volume-fill-default #{$i+'%'},$skin-color-volume-fill-default);
        .h5player-skin-elegant &{
            background: linear-gradient(to right, $skin-color-main-elegant #{($i - 1)+'%'}, $skin-color-volume-fill-elegant #{$i+'%'},$skin-color-volume-fill-elegant);
        }
        .h5player-skin-technology &{
            background: linear-gradient(to right, $skin-color-main-technology #{($i - 1)+'%'}, $skin-color-volume-fill-technology #{$i+'%'},$skin-color-volume-fill-technology);
        }
        .h5player-skin-concise &{
            background: linear-gradient(to right, $skin-color-main-concise #{($i - 1)+'%'}, $skin-color-volume-fill-concise #{$i+'%'},$skin-color-volume-fill-concise);
        }
    }
}
/* 弹幕主体显示部分 */
.h5player-barrage-wrap{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;

    .h5player-barrage-item {
        position: absolute;
        user-select: none;
        pointer-events: none;
        display: inline-block;
        white-space: pre;
        top: auto;
        left: 0;
        visibility: hidden;
    
        line-height: 1.125;
    }
}

.animation_barrage {
    animation: barrage 5s linear 0s 1;
    /* Firefox */
    -moz-animation: barrage 5s linear 0s 1;
    /* Safari 和 Chrome */
    -webkit-animation: barrage 5s linear 0s 1;
    /* Opera */
    -o-animation: barrage 5s linear 0s 1;

    .h5player-status-paused &{
        animation-play-state: paused;
    }
}

/* html5-ad-player */
.html5-ad-player{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    
    video{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        display: none;

        &[data-type="current"]{
            display: block;
        }
    }

    .html5-ad-countDown{
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 0 5px;
        height: 26px;
        line-height: 26px;
        border-radius: 1px;
        font-size: 12px;
        white-space: nowrap;
        color: #fff !important;
        background-color: rgba(37,37,37,.7);
        z-index: 99;

        .ad-countDown{
            color: #ff6e0b;
        }
    }
}

.html5-ad-link{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    z-index: 10;
}

/* h5player-pause-ad */
.h5player-pause-ad-wrap{
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: none;

    &.active{
        display: block;
    }
}
.h5player-pause-ad{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 300px;
    margin-top: -150px;
    margin-left: -200px;

    a{
        display: block;
        height: 100%;
        pointer-events: auto;
    }

    .close{
        position:absolute;
        top: 0;
        right: 0;
        z-index: 1;
        background-color: rgba(35,35,35,0.8);
    }

    img{
        max-width: 100%;
    }
}

/* 视频截图结构部分样式 */
.h5player-screenshots-wrap{
    position: absolute;
    bottom: 50px;
    width: 178px;
    height: 100px;
    background-color: #000;
    &.hide-screenshots{
        display: none;
    }
    img{
        display: block;
        max-width: 100%;
    }
    span{
        position: absolute;
        left: 5px;
        bottom: 5px;
    
        font-size: 12px;
        color: #fff;
    }
}


/* h5player-panel-wrap */
.h5player-panel-wrap{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 11;
    pointer-events: none;

    .h5player-panel-logo{
        position: absolute;
        width: 250px;
        min-height: 100px;

        &.top-right{
            top: 3%;
            right: 2%;
            img{
                left: auto;
                right: 0;
            }
        }
        &.top-left{
            top: 3%;
            left: 2%;
        }
        &.bottom-left{
            bottom: 3%;
            left: 2%;
        }
        &.bottom-right{
            bottom: 3%;
            right: 2%;
            img{
                left: auto;
                right: 0;
            }
        }
        
        img{
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            background-color: transparent; 
        }
    }
    .h5player-panel-control{
        position: absolute;
        right: -68px;
        top: 50%;
        width: 68px;
        height: 74px;
        margin-top: -37px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        -webkit-transition: right 300ms ease-in;
        transition: right 300ms ease-in;
        background-color: rgba(35,35,35,0.8);

        &.double{
            height: 148px;
            margin-top: -74px;
        }
        .h5player-status-controls-in &{
            right: 0;
        }
    }

    .h5player-panel-light,
    .h5player-panel-share{
        width: 68px;
        height: 74px;
        text-align: center;
        line-height: 74px;
        span{
            color:#fff;
            font-size: 12px;
            pointer-events: auto;
            user-select: none;
            cursor: pointer;
        }
    }
    .h5player-panel-share-content{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 360px;
        margin-left: -180px;
        height: 252px;
        margin-top: -126px;
        padding: 30px 32px 26px 32px;
        box-sizing: border-box;
        border-radius: 5px;
        background-color: rgba(35,35,35,0.8);
        user-select: none;
        display: none;
        &.active{
            display: block;
        }
        .close{
            position:absolute;
            top: 14px;
            right:14px;
        }
        .share-img{
            margin-top: 0;
            margin-bottom: 15px;
            color: #fff;
            font-size: 12px;
            dt{
                font-weight: normal;
                margin-bottom: 15px;
            }
            dd{
                margin-left: 0;
                display: inline-block;
                margin-right: 20px;
                &:last-child{
                    margin-right: 0;
                }
                a{
                    pointer-events: auto;
                }
            }
            
        }
        .share-copy,
        .share-qrcode{
            margin-top: 0;
            margin-bottom: 0;
            color: #fff;
            font-size: 12px;
            display: inline-block;
            vertical-align: top;

            dt{
                font-weight: normal;
                margin-bottom: 15px;
            }
            dd{
                margin-left: 0;
                pointer-events: auto;
            }
        }
        .share-copy{
            margin-right: 18px;
            dd{
                width: 188px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 16px;
                background-color: #4d4d4d;
                margin-bottom: 10px;
                cursor: pointer;
                border: 1px solid transparent;
                box-sizing: border-box;
                position: relative;

                &.copied{
                    border-color: $skin-color-main-default;
                    color: $skin-color-main-default;

                    .h5player-skin-elegant &{
                        border-color: $skin-color-main-elegant;
                        color: $skin-color-main-elegant;
                    }

                    .h5player-skin-technology &{
                        border-color: $skin-color-main-technology;
                        color: $skin-color-main-technology;
                    }

                    .h5player-skin-concise &{
                        border-color: $skin-color-main-concise;
                        color: $skin-color-main-concise;
                    }

                    &:after{
                        content: '\5DF2\7ECF\590D\5236';
                        position: absolute;
                        left: 50%;
                        top: 0;
                        width: 100%;
                        margin-left: -94px;
                    }
                    span{
                        opacity: 0;
                        filter:alpha(opacity= 0);
                    }
                }
                &:last-child{
                    margin-bottom: 0;
                }
                input[type="text"]{
                    pointer-events: none;
                    opacity: 0;
                    filter:alpha(opacity= 0);
                }
            }
 
        }
        .share-qrcode {
            dd{
                position: relative;
                width: 90px;
                height: 90px;
                background-color: rgba(0,0,0,0.5);
                canvas,img{
                    max-width: 100%;
                }
            }
        }

    }
}

/* h5player-vrWrap */
.h5player-vrWrap{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
}

.icon-weibo,
.icon-tWeibo,
.icon-qzone,
.icon-weChat,
.icon-qq,
.icon-renren{
    display: inline-block;
    width: 32px;
    height: 32px;
    //background-image: url(skin/shareIcon.png);
    background-image: url("");
}
.icon-weibo {
    background-position: -74px -37px;
}
.icon-tWeibo {
    background-position: -37px -37px;
}
.icon-qzone {
    background-position: -37px 0px;
}
.icon-weChat {
    background-position: -74px 0px;
}
.icon-qq {
    background-position: 0px 0px;
}
.icon-renren {
    background-position: 0px -37px;
}

/* 开关灯 - 分享 */
.videoContainer.light-off{
    z-index: 9999;
}
.vp-lightBg{
    position: fixed; 
    top: 0px; 
    left: 0px;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0,0.9); 
    z-index: 8888;
}

/* 全屏样式设置 */
:-moz-full-screen .liveContent{
    position: static;
}
:-webkit-full-screen .liveContent{
    position: static;
}

:-ms-fullscreen .liveContent{ 
    position: static;
}
  
:fullscreen .liveContent{
    position: static;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

/* 控制全屏下直播视频控制条隐藏 */
.h5player-status-fullScreen video.videoLive::-webkit-media-controls-enclosure {
    /*禁用播放器控制栏的样式*/
    display: none !important;
}

@media(max-width: 767px) {
    .liveContent video.videoLive{
        background-size: 5.625rem auto;
    }
}